<template>
  <div class="Team">
    <header>
      <div class="isShow">
        <el-switch
          v-model="value"
          active-color="#409EFF"
          inactive-color="#DCDFE6"
          active-text="前台显示管理团队"
          inactive-text="前台不显示管理团队"
          @change="changeIsShowTeam"
        ></el-switch>
      </div>
      <el-button type="primary" @click="addPeople">新增人员</el-button>
    </header>
    <el-table :data="tableData">
      <el-table-column prop="date" label="头像">
        <template slot-scope="scope">
          <span class="imgs">
            <img :src="scope.row.avatar" alt />
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="position" label="职位"></el-table-column>
      <el-table-column prop="remark" label="简介" show-overflow-tooltip></el-table-column>
      <el-table-column prop="address" label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit( scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete( scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="isShowDialog">
      <div class="each cover">
        <b>*</b>
        <span>头像:</span>
        <img :src="serveObj.avatar" alt="图标" v-if="serveObj.avatar" />
        <Upload :name="serveObj.avatar?'重新上传':'上传图片'" type="news" @saveCb="onUploadSuccess"></Upload>
      </div>
      <div class="each">
        <b>*</b>
        <span>姓名:</span>
        <el-input v-model="serveObj.name" placeholder="请输入姓名"></el-input>
      </div>
      <div class="each">
        <b>*</b>
        <span>职位:</span>
        <el-input v-model="serveObj.position" placeholder="请输入职位"></el-input>
      </div>
      <div class="each">
        <b>*</b>
        <span>简介:</span>
        <el-input v-model="serveObj.remark" placeholder="请输入简介"></el-input>
      </div>
      <div class="btns">
        <div class="btn">
          <el-button type="info" @click="isShowDialog = false">取消</el-button>
        </div>
        <div class="btn">
          <el-button type="primary" @click="save">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSie"
        :page-sizes="[10, 20, 30, 40,50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      ></el-pagination>
    </div>
    <MyDialog title="删除" ref="deleteTeam" lastText="删除" :colorType="true" @saveHandle="deleteTeam">
      <p class="tips">确定删除吗？</p>
      <p>删除后此人员前台将不再显示</p>
    </MyDialog>
  </div>
</template>
<script>
import Upload from "../components/upload";
import MyDialog from "../components/dialog";
export default {
  name: "Team",
  components: {
    Upload,
    MyDialog
  },
  data() {
    return {
      value: false,
      pageSie: 10,
      count: 0,
      currentPage: 1,
      isShowDialog: false,
      did: "",
      dialogTitle: "新增人员",
      serveObj: {
        avatar:
          "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1593106255,4245861836&fm=26&gp=0.jpg",
        name: "我是标题",
        position: "我是简介",
        remark: "213323"
      },
      tableData: []
    };
  },
  methods: {
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSie = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    handleEdit(row) {
      this.did = row.did;
      this.$post("/team/info", { did: this.did }).then(res => {
        if (res.code == 200) {
          this.isShowDialog = true;
          this.serveObj = res.data.team;
        }
      });
    },
    handleDelete(row) {
      this.did = row.did;
      this.$refs.deleteTeam.show();
    },
    //确定删除
    deleteTeam() {
      this.$post("/team/delete", { did: this.did }).then(res => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.$refs.deleteTeam.hide();
          this.getList();
        }
      });
    },
    addPeople() {
      this.isShowDialog = true;
      this.dialogTitle = "新增人员";
      this.saveType = "add";
      this.serveObj = {
        avatar: "",
        name: "",
        position: "",
        remark: ""
      };
    },
    onUploadSuccess(val) {
      this.serveObj.avatar = val;
    },
    //切换是否显示管理团队
    changeIsShowTeam(val) {
      if (val) {
        this.$post("/team/module/show").then(res => {
          if (res.code == 200) {
            this.$message.success("已设置为显示");
          }
        });
      } else {
        this.$post("/team/module/hidden").then(res => {
          if (res.code == 200) {
            this.$message.success("已设置为隐藏");
          }
        });
      }
    },
    //保存新增修改人员
    save() {
      let obj = this.serveObj;
      this.serveObj.showStatus = 1;
      if (!obj.avatar) {
        this.$message.error("请设置头像");
        return;
      }
      if (!obj.name) {
        this.$message.error("请输入姓名");
        return;
      }
      if (!obj.position) {
        this.$message.error("请输入职位");
        return;
      }
      if (!obj.remark) {
        this.$message.error("请输入简介");
        return;
      }
      if (this.saveType == "add") {
        this.$post("/team/create", this.serveObj).then(res => {
          if (res.code == 200) {
            this.$message.success("新建成功");
            this.isShowDialog = false;
            this.getList();
          }
        });
      } else {
        this.$post("/team/update", {
          name: this.serveObj.name,
          avatar: this.serveObj.avatar,
          position: this.serveObj.position,
          remark: this.serveObj.remark,
          did: this.did
        }).then(res => {
          if (res.code == 200) {
            this.isShowDialog = false;
            this.$message.success("编辑成功");
            this.getList();
          }
        });
      }
    },
    getList() {
      this.$post("/team/list", {
        page: this.currentPage,
        pageSie: this.pageSie
      }).then(res => {
        if (res.code == 200) {
          const { data } = res;
          this.count = data.count;
          this.tableData = data.teams;
        }
      });
    },
    getInfo() {
      this.$post("/team/module/info").then(res => {
        if (res.code == 200) {
          const { data } = res;
          this.value = data.module.showStatus == 1 ? true : false;
        }
      });
    }
  },
  created() {
    this.getList();
    this.getInfo();
  },
  mounted() {
    this.$parent.setPannelName([
      {
        name: "团队管理",
        path: "/Team"
      }
    ]);
  }
};
</script>
<style lang="less" scoped>
.Team {
  padding: 0 30px;
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    padding: 10px 30px 10px 10px;
    border-bottom: 1px solid #ccc;
    .isShow {
      margin-right: 20px;
    }
  }
  .imgs {
    width: 80px;
    height: 80px;
    img {
      width: 80px;
      height: auto;
    }
  }
  .each {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    b {
      color: #fe6972;
    }
    > span {
      display: inline-block;
      width: 60px;
      margin-right: 20px;
    }
    > img {
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }
  }
  .each1 {
    b {
      color: #fe6972;
    }
  }
  .btns {
    display: flex;
    margin-top: 20px;
    justify-content: center;
    .btn {
      margin-right: 20px;
    }
  }
  .file {
    position: relative;
    display: inline-block;
    background: #d0eeff;
    border: 1px solid #99d3f5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1e88c7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
  }
  .file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
  }
  .file:hover {
    background: #aadffd;
    border-color: #78c3f3;
    color: #004974;
    text-decoration: none;
  }
  .page {
    text-align: center;
    margin-top: 20px;
  }
  .tips {
    font-weight: normal;
    font-size: 32px;
    margin-bottom: 50px;
  }
}
</style>
